<template>
  <div class="w-full" v-loading="loading" style="margin:0 40px;">
    <div class="home-title">硬件购买</div>
    <el-row gutter="20">
      <el-col :span="8" v-for="item in list" :key="item.id">
        <div class="card" @click="viewDetails(item.id)">
          <div class="card-content">
            <img
                v-if="item.infoPicUrl"
                :src="item.infoPicUrl"
                alt="信息大图"
                class="card-image"
            />
            <div class="card-text">
              <div class="text-item">
                联系人: {{ item.contactUser }}
              </div>
              <div class="text-item">
                到货价格: <span class="price">{{ item.futuresPrice }}￥</span>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="more-container">
      <More :path="`/hardware`" />
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { useLoading, usePage } from "@/hooks";
import $api from "@/api/hardware";
import More from "@/views/index/components/more.vue";
import { useRouter } from "vue-router";

const props = defineProps({
  companyId: {
    type: String,
    required: true,
  },
});

const { loading, setLoading } = useLoading();
const { page, total } = usePage(10);
const list = ref([]);
const router = useRouter();

const getList = async () => {
  setLoading(true);
  try {
    const queryParams = {
      ...page.value,
    };
    const { data, total: resTotal } = await $api.getCustomerGoodsList(queryParams);
    list.value = data.slice(0, 6);
    total.value = resTotal;
  } finally {
    setLoading(false);
  }
};

const viewDetails = (id) => {
  router.push(`/hardware/detail/${id}`);
};

watch(
    () => page.value,
    () => {
      getList();
    },
    {
      deep: true,
    }
);

onMounted(() => {
  getList();
});
</script>

<style scoped>
.home-title {
  text-align: center;
  margin: 40px;
}

.card {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  cursor: pointer;
}

.card-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  height: 160px;
}

.card-image {
  width: 120px;
  height: 120px;
  object-fit: cover;
  margin-right: 20px;
}

.card-text {
  flex: 1;
  margin: 20px;
}

.text-item {
  margin: 20px;
}

.price {

  font-weight: bold;
}

.more-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
